html,
body,
#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.login-page {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
            #d443a9 0%,
            #13bdce 33%,
            #0094d9 66%,
            #6fc7b5 100%);
    background-size: 400% 400%;
    background-position: 0% 100%;
    -webkit-animation: gradient 10s ease-in-out infinite alternate;
    animation: gradient 10s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-box {
        width: 460px;
        background: rgba(225, 225, 225, .7);
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        padding: 40px;
        opacity: 0;
        animation: fadeIn 2s ease-out forwards;
        .login-box-title {
            text-align: center;
            margin-bottom: 20px;
            h1 {
                font-size: 24px;
                font-weight: bold;
                color: #333;
                margin-bottom: 15px;
                // color: transparent;
                background: linear-gradient(90deg, #409EFF, #67C23A, #E6A23C, #F56C6C);
                background-clip: text;
                -webkit-background-clip: text;
                animation: gradientText 5s ease-in-out infinite;
            }
        }

        .el-form-item {
            margin-bottom: 20px;
        }

        .el-input {
            width: 100%;
            height: 48px;
        }

        .el-button {
            width: 90%;
            height: 48px;
            margin: 10px auto;
            border-radius: 50px;
        }

        .el-icon {
            font-size: 16px;
            color: #909399;
        }

        .el-input__inner {
            border-radius: 4px;
        }

        .el-button--primary {
            background-color: #409EFF;
            border-color: #409EFF;
        }

        .el-button--primary:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
        }
        .login-register{
            text-align: center;
            font-size: 14px;
            color: #909399;
            font-weight: 400;
            cursor: pointer;
        }
    }
}

@keyframes gradientText {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        /* 动画开始时完全透明 */
    }

    100% {
        opacity: 1;
        /* 动画结束时完全不透明 */
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 100%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 100%;
    }
}

/* 兼容性处理 */
@-webkit-keyframes gradient {
    0% {
        background-position: 0% 100%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 100%;
    }
}